<template>
	<page-meta :root-font-size="`${fontSize}px`"></page-meta>
	<view class="garbage-container">
		<view class="banner">
			<image src="../../static/icon/gb.png" mode=""></image>
		</view>
		<view class="navbar">
			<view class="navItem" v-for="(item,index) in banner" :key="index" @click="goKnowledge(item.id)">
				<view class="item-img">
					<image :src="item.src" mode=""></image>
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>
		
		
		<navigator url="../../pages/release/release">
			<view class="info-item">
				<view class="icon-item">
					<image src="../../static/icon/m5.png"></image>
				</view>
				<text>投放记录</text>
				<view class="arrow"></view>
			</view>
		</navigator>
		<navigator url="../subscribeMessage/subscribeMessage">
			<view class="info-item">
				<view class="icon-item">
					<image src="../../static/icon/g1.png"></image>
				</view>
				<text>上门回收</text>
				<view class="arrow"></view>
			</view>
		</navigator>
		<navigator url="../subscribeMessage/subscribeMessage">
			<view class="info-item">
				<view class="icon-item">
					<image src="../../static/icon/g2.png"></image>
				</view>
				<text>扫码投放</text>
				<view class="arrow"></view>
			</view>
		</navigator>
		<navigator url="../guide/guide">
			<view class="info-item">
				<view class="icon-item">
					<image src="../../static/icon/g3.png"></image>
				</view>
				<text>投放指南</text>
				<view class="arrow"></view>
			</view>
		</navigator>
	<!-- 	<navigator url="../subscribeMessage/subscribeMessage">
			<view class="info-item" style="margin-bottom: 20rpx;">
				<view class="icon-item">
					<image src="../../static/icon/g4.png"></image>
				</view>
				<text>意见反馈</text>
				<view class="arrow"></view>
			</view>
		</navigator> -->
		<navigator url="../subscribeMessage/subscribeMessage">
			<view class="info-item">
				<view class="icon-item">
					<image src="../../static/icon/g5.png"></image>
				</view>
				<text>回收订单</text>
				<view class="arrow"></view>
			</view>
		</navigator>	
	
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		computed: {
			...mapState(['fontSize'])
		},
		data() {
			return {
				banner: [{
						id: 0,
						src: '../../static/icon/36.png',
						name: '可回收垃圾'
					},
					{
						id: 1,
						src: '../../static/icon/10.png',
						name: '易腐垃圾'
					},
					{
						id: 2,
						src: '../../static/icon/37.png',
						name: '有害垃圾'
					}, {
						id: 3,
						src: '../../static/icon/38.png',
						name: '其他垃圾'
					}
				],
			}
		},
		methods: {
			goKnowledge(id) {
				uni.navigateTo({
					url: '../knowledge/knowledge?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.garbage-container {
		background-color: #F9F9F9;
		height: 100vh;
		.banner {
			width: 750rpx;
			height: 286rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.navbar {
			width: 710rpx;
			min-height: 224rpx;
			background: #FFFFFF;
			position: relative;
			padding-top: 40rpx;
			top: -50rpx;
			left: 20rpx;
			// margin-left: 20rpx;
			box-shadow: 0px 1px 10rpx 0px #F5F5F5;
			border-radius: 8rpx;
			display: flex;
			.navItem {
				flex: 1;
				text-align: center;
				.item-img {
					width: 80rpx;
					height: 80rpx;
					margin: 10rpx auto;
					image {
						width: 100%;
						height: 100%;
					}
				}
				text {
					font-size: 28rpx;
					color: #333;
				}
			}
		}
		.info-item {
			width: 710rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			position: relative;
			left: 20rpx;
			top: -30rpx;
			background: #FFFFFF;
			box-shadow: 0px 2rpx 0px 0px #F5F5F5;
			border-radius: 8rpx 8rpx 0px 0px;
			.icon-item {
				width: 40rpx;
				height: 40rpx;
				margin-right: 24rpx;
		
				image {
					width: 100%;
					height: 100%;
				}
			}
		
			text {
				color: #656565;
				// font-size: 28rpx;
				font-size: 32rpx;
			}
		
			.arrow {
				position: absolute;
				top: 28rpx;
				right: 36rpx;
				transform: rotate(45deg);
				width: 24rpx;
				height: 24rpx;
				color: #9F9F9F;
				border-top: 2rpx solid rgba(159, 159, 159, 1);
				border-right: 2rpx solid rgba(159, 159, 159, 1);
			}
		}
	}
</style>